<template>
  <div>
    <a-card :bordered="false">
      <!--  #####################查询条件###################  -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="客户名称">
                <a-input v-model="queryParam.name" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="服务商">
                <a-select showSearch optionFilterProp="children" v-model="queryParam.companyId"
                          :filterOption="filterOption">
                  <a-select-option v-for="item in companys" :key="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons"
                    :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button v-action:query type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!--  #####################操作###################  -->
      <div class="table-operator">
        <a-button v-action:add type="primary" icon="plus" @click="handleEdit('null')">新建</a-button>
      </div>

      <!--  #####################表格###################  -->
      <s-table ref="table" :columns="columns" :data="loadData">
        <span slot="fileUrl" slot-scope="text, record">
          <img :src="text" alt="" height="100px">
        </span>
        <a-tag slot="status" slot-scope="text" :color="text | statusColorFilter">
          {{text | statusFilter}}
        </a-tag>
        <span slot="action" slot-scope="text, record">
          <template>
<!--            <a v-action:query @click="handleToPic(record)">轮播图</a>-->
<!--            <a-divider v-action:query type="vertical"/>-->
            <a v-action:edit @click="handleEdit(record)">编辑</a>
            <a-divider v-action:edit type="vertical"/>
            <a v-action:delete @click="handleDel(record)">删除</a>
          </template>
        </span>
      </s-table>

      <!--  #####################打开的页面###################  -->
    </a-card>
  </div>
</template>

<script>
  import { STable } from '@/components'
  // import edit from './customerEdit'
  import { optionselect } from '@/api/system/company'
  import { selectPage, del } from '@/api/mini/customer'

  /**
   * 组件
   */
  const components = { STable }

  const columns = [
    {
      title: '小程序名称',
      dataIndex: 'name'
    },
    {
      title: '小程序appid',
      dataIndex: 'miniAppid'
    },
    {
      title: '小程序secret',
      dataIndex: 'miniSecret'
    },
    // {
    //   title: '余额',
    //   dataIndex: 'amount',
    //   customRender: (text) => text + ' 元'
    // },
    {
      title: '操作',
      dataIndex: 'action',
      width: 230,
      scopedSlots: {
        customRender: 'action'
      }
    }
  ]

  const statusMap = {
    false: {
      status: '#108ee9',
      text: '启用'
    },
    true: {
      status: '#f50',
      text: '禁用'
    }
  }

  /**
   * 数据
   */
  const data = function() {
    return {
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      columns,
      editProps: [],
      companys:[],

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return selectPage(Object.assign(parameter, this.queryParam)).then(res => {
          return res.data
        })
      }
    }
  }

  const created = function() {
    optionselect().then(res => {
      if (res.code === 200) {
        this.companys = res.data
      }
    })
  }

  /**
   * 过滤器
   */
  const filters = {
    statusFilter(status) {
      return statusMap[status].text
    },
    statusColorFilter(status) {
      return statusMap[status].status
    }
  }

  /**
   * 计算属性
   */
  const computed = {}

  /**
   * 侦听器
   */
  const watch = {}

  export default {
    name: 'customerList',
    data: data,
    components: components,
    created: created,
    filters: filters,
    computed: computed,
    watch: watch,
    /**
     * 方法
     */
    methods: {
      handleEdit(record) {
        this.$emit('onEdit', record)
      },
      handleToPic(record) {
        this.$router.push({ name: 'customerPicInfo', params: { customerCode: record.code } })
      },
      handleLuck(record) {
        this.$router.push({ name: 'luckdraw', params: { customerCode: record.code } })
      },
      refresh() {
        this.$refs.table.refresh()
      },
      handleDel(record) {
        const _this = this
        this.$confirm({
          title: '警告',
          content: `真的要删除 ${record.name} 吗?`,
          okText: '删除',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            // 在这里调用删除接口
            del(record.id).then(res => {
              if (res.code === 200) {
                _this.$message.success(res.message)
                _this.$refs.table.refresh()
              }
              if (res.code === 500) {
                _this.$message.error(res.message)
              }
            })
          }
        })
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    }
  }
</script>

<style scoped>

</style>
